<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name=”renderer” content=”webkit”>
	<meta name="referrer" content="never">
	<title>友情链接-关中刀客在青岛</title>
	<meta name="keywords" content="关中刀客在青岛,喜欢音乐的程序猿,个人博客,web开发,前端技术博客">
	<meta name="description" content="夕阳无限好，黄昏又如何——作者31岁转行，本站是以前端技术为主的个人博客">
	<link rel="stylesheet" href="../assets/css/bootstrap-4.3.1.min.css">
	<link rel="stylesheet" href="../css/common.css">
	<style>
		.card-columns {
			columns: 10rem 6;
			column-gap: .75rem;
		}

		.card {
			display: inline-block;
			padding: .5rem;
			border: none;
			background: transparent;
		}

		.card a.item {
			position: relative;
			display: block;
			background: #1e1e1e;
			border-radius: .5rem;
			overflow: hidden;
			box-shadow: 0.125rem 0.125rem 0.25rem 0.125rem #d18761;
			transition: .33s;

		}

		@keyframes shadows {
			13% {
				box-shadow: 0 0 0.25rem #d18761;
			}
			63% {
				box-shadow: 0 0 .5rem .25rem #ffa870;
			}
			to {
				box-shadow: 0 0 0.25rem #d18761;
			}
		}

		a.item:hover {
			left: 0.125rem;
			top: 0.125rem;
			box-shadow: 0 0 0.25rem #d18761;
			animation: shadows 2s infinite;
		}

		a.item img {
			width: 100%;
			transition: 5s linear;
		}

		a.item:hover img {
			transform: scale(1.13);
		}

		a.item h4 {
			font-weight: bold;
			margin: .5rem;
			font-size: 1.25rem;
			text-align: center;

		}

		a.item p {
			padding: 0 1rem;
			/*height: 4rem;*/
			font-size: .875rem;
		}
	</style>
</head>
<body id="friendlyLink">
<nav id="mainNav" class="navbar navbar-expand-md navbar-dark mb-md-5"></nav>
<main class="container">

	<div class="row">
		<div class="col-md-12">
			<h2 class="mt-5 mt-md-2 text-md-center">小伙伴们</h2>
			<p>
				本页面接受非商业友链申请。如果有希望和本站交换友链的小伙伴们，请往下看：
			<ul class="mb-5">
			<li>只接受内容健康，积极向上的非商业站点，原创为主的技术博客优先；
			<li>不接受违反国家规定、擦边球以及内容低俗的站点；
			<li>在申请友链之前请先添加本博客链接；
			<li>通过admin@e-art.top或<a href="aboutMe.html">个人介绍页面</a>的社交账号留言，内容包括你的网址、博客名称、简介、logo或相关图片链接；
			<li>不定期删除无法访问和不合法规的链接。
			<li>本站链接信息：
			<ul>
				<li>名称：关中刀客在青岛</li>
				<li>链接：http://e-art.top/</li>
				<li>头像：http://e-art.top/img/logo_v0.1_w.png或http://e-art.top/img/favicon.ico</li>
				<li>描述：可根据印象自行描述，懒得写就复制这句话：“夕阳无限好，黄昏又如何——作者31岁转行，本站是以前端技术为主的个人博客”</li>
			</ul>
		</li>
			</ul>
		</div>
		<div id="friendlyList" class="card-columns">
			<div v-for="(item,index) in dataList" class="card" v-cloak>
				<a :href="item.url" target="_blank" class="item">
					<img v-if="item.imgSrc" :src="item.imgSrc" alt="item.name" :style="item.type==='ico'?'padding:1.5rem;filter: drop-shadow(1px 1px 0px #fff);':''">
					<h4>{{item.name}}</h4>
					<p>{{item.disc}}</p>
				</a>
			</div>

		</div>

	</div>
</main>
<footer></footer>

<script src="../assets/js/jquery-2.2.4.min.js"></script>
<script src="../assets/js/bootstrap-4.3.1.min.js"></script>
<script src="../assets/js/vue-2.6.10.min.js"></script>
<script src="../js/common.js"></script>
<script>
    $(function () {

    })

    let friendlyLink = new Vue({
        el: '#friendlyList',
        data: {
            dataList: []
        },
        beforeMount() {
            $.get('../data/friendlyLink.json', data => {
                this.dataList = data.friends.concat(data.publicFigure)
            })
        }
    })
</script>
</body>
</html>
